<template>
	<view class="box footBuy">
		<view style="height:212upx"></view>
		<view class="cu-bar foot bg-white" style="position: fixed;bottom:100upx;left:0;
		right:0;min-height:80upx;">
			<view class="action">
				<!-- 我已阅读并接受 -->
				<text @tap="handleCheckClick">
					<text :class="isCheck?'cuIcon-squarecheckfill text-orange':'cuIcon-square'"></text>
					{{$t('JLink.buy.read')}}&nbsp;&nbsp;</text>
									<!-- 购买须知 -->
					<!-- 购买须知 -->
				<text class="text-orange" @tap="PurchaseKnown">《{{$t('JLink.buy.purchaseNotes')}}》</text>
			</view>
		</view>
		<view class="cu-bar bg-white tabbar border shop foot boxShadowNone">
			<view class="action" style="text-align: left;padding-left:30upx;">
				<!-- 总计 -->
				<text style="margin-right:10upx">{{$t('JLink.buy.total')}}：</text>
				<text class="text-lg text-red" style="margin-right:10upx">{{message.currencyUnit}}</text>
				<text class="text-xxl text-red">{{message.price}}</text>
				<text class="text-gray" style="padding-left:10upx;font-size:28upx;">
					/{{message.buyNum}}
					<text v-if="message.buyUnit==0">
						<text v-if="message.buyNum<=1">{{$t('JLink.buy.Month')}}</text>
						<text v-else>{{$t('JLink.buy.Months')}}</text>
					</text>
					<text v-else-if="message.buyUnit==1">
						<text v-if="message.buyNum<=1">{{$t('JLink.buy.Year')}}</text>
						<text v-else>{{$t('JLink.buy.Y')}}</text>
					</text>
					<text v-else-if="message.buyUnit==2">
						<text v-if="message.buyNum<=1">{{$t('JLink.buy.Day')}}</text>
						<text v-else>{{$t('JLink.buy.D')}}</text>
					</text>
				</text>
			</view>
			<!-- 立即购买 -->
			<view class="bg-primary submit text-white" style="width:324upx;height:inherit" @tap="buyClick">
				{{$t('JLink.buy.buyNow')}}
			</view>
		</view>
	</view>
</template>

<script>
export default {
    props:{
		message:{
		  type:Object,
		  default:()=>{
			return{
			  buyNum:'',
			  buyUnit:'',
			  currencyUnit:'',
			  price:'',
			}
		  }
		},
		buyCheck:{
		  type:Boolean,
		  default:false
		}
	},
	data() {
	    return {
       	    isCheck:false,
			value:[],
			range:[{value:1,text:''}]
		}
	},
	watch:{
		buyCheck:{
			handler(val){
				this.isCheck=val
			}
		},
		immediate:true
		
	},
	methods: {
		// 勾选事件
		handleCheckClick (){
		  this.isCheck = !this.isCheck;
		  this.$emit('checkClick',this.isCheck)
		},
		// 购买须知
		PurchaseKnown(){
		  this.$emit('purchaseKnown')
		},
		// 立即购买
		buyClick(){
		  this.$emit('buyClick')
		}
  }
}
</script>
<style lang="less">
	@import '@/common/style/main.css';
.cu-bar.foot{
	position: fixed;
	left:0;
	border-top: 1rpx solid #DADADA;
}
</style>
